<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>购物车和结算页</title>
  <link type="text/css" rel="stylesheet" href="css/common.css" >
  <link type="text/css" rel="stylesheet" href="css/main.css" >
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
<div class="headerBar">
  <div class="topBar">
    <div class="comWidth">
      <div class="fl">
        <a href="#" class="collection">收藏慕课</a>
      </div>
      <div class="top_nav fr">
        欢迎来到慕课网！
        <a href="#">[登录]</a>
        <a href="#">[免费注册]</a>
      </div>
    </div>
  </div>
  <div class="logoBar">
    <div class="comWidth clearfix">
      <div class="logo fl">
        <img src="images/logo.jpg">
      </div>
      <div class="step_box fr">
        <div class="step">
        </div>
        <ul class="step_text clearfix">
          <li class="s01">我的购物车</li>
          <li class="s02">填写核对订单</li>
          <li class="s03">订单提交成功</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="shoppingCart comWidth">
    <div class="shopping_item">
      <h3 class="shopping_tit">收货信息</h3>
      <div class="shopping-cont padding_shop">
        <ul class="shopping_list clearfix">
          <li><span class="shopping_list_text"><i>*</i>选择地区：</span>
            <div class="select">
              <h3>海淀区五环内</h3><span class="arrow"></span>
              <ul class="select_list hide">
                <li><a href="#">瑶海区</a></li>
                <li><a href="#">海淀区五环内</a></li>
                <li><a href="#">瑶海区</a></li>
                <li><a href="#">瑶海区</a></li>
              </ul>
            </div>
            </li>
          <li><span class="shopping_list_text"><i>*</i>详细地址：</span><input  class="shopping_input input_b" type="text" value="最多输入26个汉字"></li>
          <li><span class="shopping_list_text"><i>*</i>收 货 人：</span><input  class="shopping_input" type="text" value="最多10个汉字"></li>
          <li><span class="shopping_list_text"><i>*</i>手	机：</span><input  class="shopping_input" type="text" value="如15921334566">
          或固定电话&nbsp;<input  class="shopping_input input_s" type="text" value="区号"><em>-</em><input  class="shopping_input input_s02" type="text" value="电话号码"><em>-</em><input  class="shopping_input" type="text" value="分机号(可选)">
          </li>
          <li><a href="#" class="shopping_list_address">确认收货地址</a></li>
        </ul>
      </div>
    </div>
    <div class="shopping_item">
      <h3 class="shopping_tit">支付方式</h3>
      <div class="shopping-cont padding_shop">
        <p class="shoppping_radio"><input type="radio" id="ck1"><label for="ck1">微信支付</label><span>用微信扫一扫就能支付</span></p>
        <p class="shoppping_radio"><input type="radio" id="ck1"><label for="ck1">货到付款</label><span>送货上门后在付款,使用现金或刷银行卡。</span></p>
      </div>
    </div>
    <div class="shopping_item">
      <h3 class="shopping_tit">送货清单</h3>
      <div class="shopCart_box">
        <ul class="shopCart_tit clearfix">
          <li class="cart_name">商品名称</li>
          <li class="cart_price">单价</li>
          <li class="cart_return">返现</li>
          <li class="cart_number">数量</li>
          <li class="cart_count">小计</li>
        </ul>
        <ul class="shopCart_cont shopCart_tit clearfix">
          <li class="cart_name clearfix">
            <div class="cart_img"><img src="images/goods.jpg"></div>
            <div class="cart_tit">
              <p>Hisense 海信 BCD-202D 202升 三门冰箱（银色）</p>
              <p class="cart_note">赠品保鲜盒抽真空保鲜盒-海信冰洗赠品</p>
            </div>
          </li>
          <li class="cart_price">￥12888</li>
          <li class="cart_return">￥128</li>
          <li class="cart_number">18</li>
          <li class="cart_count">￥1288822</li>
        </ul>
        <div class="shopCart_message">
          若您对包裹有特殊要求，请在此留言
        </div>
        <ul class="shopCart_cont shopCart_tit clearfix">
          <li class="shoplist_text_sorry">抱歉，以下商品暂时不能购买，已帮您自动在本次结算中剔除并扣减对应金额，您可以先购买其他商品</li>
          <li class="cart_name clearfix">
            <div class="cart_img"><img src="images/goods.jpg"></div>
            <div class="cart_tit cart_available">
              <p>Hisense 海信 BCD-202D 202升 三门冰箱（银色）</p>
              <p>数量：1件</p>
              <p>￥4.9<span>（无货）</span></p>
            </div>
          </li>
          </ul>
      </div>
    </div>
    <div class="shopping_item">
      <h3 class="shopping_tit">订单结算</h3>
      <div class="submit_box">
        <div class="shopping_total"><span>总计：</span>￥1288192228666</div>
        <a href="#" class="shopping_submit">提交订单</a>
      </div>
    </div>
  </div>
  <div class="hr_30"></div>
</div>
<div class="footer_bar">
    <div class="comWidth">
        <p class="footer_title">
            <a href="#">慕课简介</a>|<a href="#">慕课公告</a>|<a href="#">招纳贤士</a>|<a href="#">联系我们</a>|客服热线：400-675-1234
        </p>
        <p class="footer_company">
            <span>Copyright © 2006 - 2014 慕课版权所有</span><span>京ICP备09037834号</span><span>京ICP证B1034-8373号</span>
            <span>某市公安局XX分局备案编号：123456789123</span>
        </p>
        <p class="footer_img">
            <img src="images/webLogo.jpg"><img src="images/webLogo.jpg"><img src="images/webLogo.jpg"><img src="images/webLogo.jpg">
        </p>
    </div>
</div>
</body>
</html>